<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>淘彩</title>
    <link href="css/mui.css" rel="stylesheet"/>
    <link href="css/user.css" rel="stylesheet"/>
</head>
<body>
<div id="app" v-cloak>
    <header class="mui-bar mui-bar-nav header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h2 class="mui-title">兑换彩金</h2>
    </header>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background: #f2f2f2;">
        <div class="mui-scroll">
            <div class="userWithdrawal">
                <div class="userWithdrawalSec">
                    <div class="userIndexList">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" style="font-size: 14px;">
                                    <span>彩豆总额</span>
                                    <div class="fl_right"><span class="co_rd">{{memIntegral}}</span><span>彩豆</span>
                                    </div>
                            </li>
                            <li class="mui-table-view-cell" style="font-size: 14px;">
                                    <span>可兑换彩豆</span>
                                    <div class="fl_right"><span class="co_rd">{{memIntegral}}</span><span>彩豆</span>
                                    </div>
                            </li>
                            <li class="mui-table-view-cell" style="font-size: 14px;">
                                    <span>兑换</span>
                                    <div class="fl_right">
                                        <div class="mtable_rightInput">
                                            <input type="text" name="" placeholder="输入您想要兑换的金额"
                                                   onblur="this.placeholder='输入您想要兑换的金额'" onfocus="this.placeholder=''"
                                                   class="uil_input" onkeyup="if(isNaN(value))execCommand('undo')"
                                                   onafterpaste="if(isNaN(value))execCommand('undo')"
                                                   v-on:input="countBonus" v-model='tempIntergral' style="font-size: 14px !important;line-height: 16px;"><span>彩金</span>
                                        </div>
                                    </div>
                            </li>
                        </ul>
                    </div>
                    <div class="userCaidouMsg">
                        <h6>• 本次兑换可获得<span id="amount">{{memWallet}}</span>彩金</h6>
                    </div>
                </div>
                <div class="userInfoSubmit"><span class="btn-red btn-bloak" id="confirm">确认兑换</span></div>
                <div class="userCaidouMsg">
                    <h5>注意事项：</h5>
                    <p>1.兑换比例为200彩豆=1.00彩金</p>
                    <p>2.彩豆兑换的彩金只能用来购彩，不能进行提现</p>
                    <p>3.每次需要以200的倍数进行兑换，每次最少兑换200彩豆</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
    'use strict'

    $(document).ready(function () {
		if(!sessionStorage.getItem("Authorization")){
			mui.alert('', '请先登录', function () {
				window.location.href = 'login.html'
			})
		}
        new Vue({
            el: '#app',
            data: {
                memIntegral: '0',  // 彩豆数量
                tempIntergral: '',  // 输入的彩豆数量
                memWallet: '0',  // 彩金数量
            },
            mounted: function () {
                let that = this
                that.getIntegral()


                mui("body").on('tap', "#confirm", function (event) {
                    that.confirmExchange()
                })
            },
            methods: {
                /**
                 *  根据输入的彩豆数量计算可兑换彩金，兑换规则200:1
                 */
                countBonus: function () {
                    this.memWallet = Number(this.tempIntergral) / 200 * 1
                },
    
                /**
                 *  获取当前用户彩豆数量
                 */
                getIntegral: function () {
                    let url = 'biz/api/jszc-member-infos/memIntegral',
                        that = this,

                    getIntegralSuc = (data) => {
                        // console.log(data)

                        that.memIntegral = data.data.memIntegral ? data.data.memIntegral : '0'
                    },

                    getIntegralErr = (err) => {
                        console.log(err)
                    }

                    common.ajax(url, '', getIntegralSuc, getIntegralErr, 'GET')
                },

                /**
                 *  确认兑换
                 */
                confirmExchange: function () {
                    let url = 'biz/api/jszc-member-infos/memWallet',
                        that = this

                    if (Number(that.tempIntergral) >= 200) {
                        let confirmExchangeSuc = (data) => {
                            console.log(data)
                            if(data.code==1000){
                                mui.alert('', '兑换成功', function () {
                                    that.tempIntergral = '' 
                                    that.memWallet = '0'
                                    window.location.reload();
                                })
                            } else {
                                mui.alert('', data.msg, function () {
                                    that.tempIntergral = '' 
                                    that.memWallet = '0'
                                })
                            }
                        },

                        confirmExchangeErr = (err) => {
                            console.log(err)
                        }

                        common.ajax(url, {
                            memIntegral: that.tempIntergral,
                            memWallet: that.memWallet,
                            loginSource: 'WECHAT'
                        }, confirmExchangeSuc, confirmExchangeErr)
                    } else {

                        mui.alert('', '每次至少兑换200彩豆', function () {})
                    }
                }
            }
        })
    })
</script>
</html>
